<template>
  <div class="search-result">
    <van-list 
    v-model="loading" 
    :finished="finished" 
    finished-text="没有更多了" 
    error-text="加载失败，点击重新加载"
    @load="onLoad">
      <van-cell 
      v-for="(article, index) in list" 
      :key="index"
      :title="article.title"
      />
    </van-list>
  </div>
</template>

<script>
import { getSearchResult } from '@/api/search'
  export default {
    name: 'SearchResult',
    components: {},
    props: {
        searchText: {
            type: String,
            require: true
        }
    },
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        page: 1,
        perPage: 20
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        async onLoad() {
        try {
            const { data } = await getSearchResult({
                page: this.page,
                per_page: this.perPage,
                q : this.searchText
            })
            // 将数据添加到数组列表中
            const { results } = data.data
            this.list.push(...results)

            // 将本次加载中的 loading 关闭
            this.loading = false
            

            // 判断是否还有数据
            if (results.length) {
                this.page++
            } else {
                this.finished = true
            }
        } catch (err) {
            this.error = true
            this.loading = false
        }
      }
    }
  }
</script>

<style scoped lang="less"></style>
